import React, { useState } from 'react';
import { Modal, Button, InputNumber, message } from '@repo/ui';
import { PlusIcon } from '@repo/ui';
import styles from './recharge-dialog.module.css';

interface RechargeDialogProps {
  isOpen: boolean;
  onClose: () => void;
}

const RechargeDialog: React.FC<RechargeDialogProps> = ({
  isOpen,
  onClose
}) => {
  const [amount, setAmount] = useState<number | null>(10);
  const [selectedPreset, setSelectedPreset] = useState<number>(10);

  const presetAmounts = [10, 50, 100, 200, 500, 1000];

  const handleAmountChange = (value: number | null) => {
    if (value !== selectedPreset) {
      setSelectedPreset(0);
    }
    setAmount(value);
  };

  const handlePresetClick = (presetAmount: number) => {
    setAmount(presetAmount);
    setSelectedPreset(presetAmount);
  };

  const handleConfirm = () => {
    if (amount && amount > 0) {
      message.destroy();
      message.warning('充值系统正在维护中，请稍后再试', 3000);
      handleClose();
    }
  };

  const handleClose = () => {
    setAmount(10);
    setSelectedPreset(10);
    onClose();
  };

  return (
    <Modal
      visible={isOpen}
      onClose={handleClose}
      title="账户充值"
    >
      <div className={styles.content}>
        <div className={styles.section}>
          <h4 className={styles.sectionTitle}>选择充值金额</h4>
          <div className={styles.presetGrid}>
            {presetAmounts.map((preset) => (
              <button
                key={preset}
                className={`${styles.presetButton} ${
                  selectedPreset === preset ? styles.presetButtonActive : ''
                }`}
                onClick={() => handlePresetClick(preset)}
              >
                ¥{preset}
              </button>
            ))}
          </div>
        </div>

        <div className={styles.section}>
          <h4 className={styles.sectionTitle}>自定义金额</h4>
          <div className={styles.customAmount}>
            <span className={styles.currencySymbol}>¥</span>
            <InputNumber
              value={amount}
              onChange={handleAmountChange}
              placeholder="输入充值金额"
              className={styles.amountInput}
              min={1}
              max={1000}
              step={1}
            />
          </div>
        </div>

        <div className={styles.summary}>
          <div className={styles.summaryItem}>
            <span className={styles.summaryLabel}>充值金额</span>
            <span className={styles.summaryValue}>
              ¥{amount || '0.00'}
            </span>
          </div>
          <div className={styles.summaryItem}>
            <span className={styles.summaryLabel}>到账积分</span>
            <span className={styles.summaryValue}>
              {amount ? (amount * 10).toFixed(0) : '0'} 积分
            </span>
          </div>
        </div>

        <div className={styles.actions}>
          <Button 
            onClick={handleConfirm}
            disabled={!amount || amount <= 0}
            className={styles.confirmButton}
          >
            <PlusIcon size={16} />
            确认充值
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default RechargeDialog;
